<template>

	<view>
		<view class="topt" :style="{ paddingTop:statusH+'px',backgroundImage: 'url(' + backgroundImage + ')', backgroundSize: '100% 100%' }">

			<view class="store">
				<view style="padding: 5%;display: flex;">
					<view style="width: 80%;">
						<view style="font-weight: bold;" v-if="bdata">
							{{bdata.store.title}}
						</view>
						<view v-if="bdata">
							<view class="cate-right-title2">
								<view style="display: flex;align-items: center;">
									<image style="width: 14px;height: 14px;margin-right: 5px;" src="@/static/pnone.png" mode="">
									</image>
									{{bdata.store.date_time}}
								</view>
								<view style="display: flex;align-items: center;margin-left: 2%;">
									<image style="width: 14px;height: 14px;margin-right: 5px;" src="@/static/time1.png" mode="">
									</image>
									{{bdata.store.phone}}
								</view>
							</view>
							<view class="cate-right-title2">
								地址： {{bdata.store.address}}
							</view>
						</view>

					</view>
					<view
						style="display: flex;flex-direction: column;align-items: center;justify-content: space-between;">
						<image style="width: 33px;height: 33px;" :src="bdata.store.logo" mode="">
						</image>
						<view style="font-size: 12px;color: #ff782a;">
							{{distancethis}}km
						</view>
						<view style="font-size: 12px;color: #ff782a;border: 1px solid;padding: 2px 6px;border-radius: 4px;margin-top: 4%;"
							@click="copyText(bdata.store.address)">
							复制地址
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 关注"前端组件开发"公众号，可申请加入前端技术交流群 -->
		<view class="cateBox">
			<!-- 左侧列表 -->
			<scroll-view class="cate-left" scroll-y="true" :scroll-top="verticalNavTop" scroll-with-animation>

				<view class="cate-left-list" v-for="(item,index) in adata" :key="index"
					@click="tapselect(index,item.id)">
					<!-- activeItem为选中状态 -->

					<view class="cate-left-item " :class="{activeItem:currentTab==index}">
						<label></label><text></text><text>{{item.title}}</text>
					</view>
				</view>
			</scroll-view>

			<!-- 右侧列表 -->

			<scroll-view ref="rightScrollV" class="cate-right" scroll-y="true" @scroll="mainScroll"
				:scroll-into-view="'cate-'+mainCur" scroll-with-animation>


				<view class="right_header3">
					<view class="header3_item" @click="right_click3(index)"
						:class="rightNav3Index == index ? 'h3_act' : ''" v-for="(item,index) in rightNav3" :key="index">
						{{item}}
					</view>

				</view>




				<view v-for="(item,index) in bdata.good_list" style="display: flex;margin-top: 5%;min-height: 110px;" class="right-item">
					<view style="width: 40%;padding: 5%;">
						<image class="right-item-image" :src="item.photo" mode=""></image>
					</view>
					<view class="cate-right-title" @click="$utils.navigateTo('goods/view',{ id: item.id })">
						<view style="width: 100%;">
							<view style="font-weight: bold;font-size: 15px;">{{item.title}}</view>

							<view class="r_money">
								<view style="font-size: 10px;color: #ef7061;">
									<text
										style="font-size: 14px;color: #ef7061;font-weight: bold;">￥{{item.price}}</text>元/天
								</view>
								<image @click="goTo('sort/lease')" src="/static/sort_good.png" mode=""></image>
							</view>
						</view>

					</view>


					<view class="cate-right-list">
						<!-- 		<scroll-view class="cate-left2" scroll-x="true" :scroll-top="verticalNavTop"
							scroll-with-animation style="white-space: nowrap;">
							<view style="display: flex;">


								<view class="cate-right-item" v-for="(child,childindex) in item.good_list"
									:key="childindex" @click="$utils.navigateTo('goods/view',{ id: item.id })">
									<image :src="child.photo" mode=""></image>
									<text>{{child.title}}</text>
									<view style="color: #cf666a;font-size: 26rpx;width: 50%;margin: auto;">
										￥{{child.price}}
									</view>
								</view>
							</view>
						</scroll-view> -->
					</view>
				</view>

				<view style="height: 60rpx;"></view>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	export default {

		data() {
			return {
				adata: [],
				bdata: null,
				currentTab: 0,
				distancethis: 0,
				rightNav3Index: -1,
				rightNav3: ['新品', '热租', '价格'],
				store_id: 0,
				price: 0, //排序
				is_hot: 0, // 热租
				is_new: 0, // 新品
				id: 0,
				mainCur: 0,
				cid: 0,
				cid2: 0,
				rightNav4Index: 1,
				verticalNavTop: 0,
				list: [{}],
				backgroundImage:'',
				statusH:this.$storage.get("statusH")

			}
		},
		onLoad(e) {
			this.store_id = e.id
			this.getdata(this.store_id);
		},
		methods: {

			right_click3(i) {
				this.rightNav3Index = i;
				if (i == 1) {
					this.is_hot = 1
					this.is_new = 0
					this.rightNav4Index = 2;
				} else {
					this.is_hot = 0
					this.is_new = 1
					this.rightNav4Index = 1;
				}
				this.getdata(this.cid, this.cid2, this.bid, this.is_hot, this.is_new);
			},
			right_click4() {
				if (this.rightNav4Index == 1) {
					this.rightNav4Index = 2;
				} else {
					this.rightNav4Index = 1;
				}
				this.onLoadData(this.cid, this.cid2, this.bid, this.is_hot, this.is_new, this.rightNav4Index);
			},


			getDistance(lat1, lon1, lat2, lon2) {
				const earthRadius = 6371; // 地球半径，单位为千米
				const radLat1 = (Math.PI / 180) * lat1;
				const radLon1 = (Math.PI / 180) * lon1;
				const radLat2 = (Math.PI / 180) * lat2;
				const radLon2 = (Math.PI / 180) * lon2;

				const deltaLat = radLat2 - radLat1;
				const deltaLon = radLon2 - radLon1;

				const a =
					Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
					Math.cos(radLat1) *
					Math.cos(radLat2) *
					Math.sin(deltaLon / 2) *
					Math.sin(deltaLon / 2);
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				const distance = earthRadius * c;

				return distance.toFixed(2); // 返回保留两位小数的距离值
			},
			copyText(value) {
				uni.setClipboardData({
					data: value, // 需要复制的内容
					success: () => {
						uni.showToast({
							title: "复制成功",
							icon: "none"
						});
					},
					fail: () => {
						uni.showToast({
							title: "复制失败",
							icon: "none"
						});
					}
				});
			},
			getdata(id) {
				this.$http.getStoreList({
					store_id: this.store_id,
					cid: this.id,
					price: this.rightNav4Index,
					is_new: this.is_new,
					is_hot: this.is_hot
				}).then(res => {
					let fullAutoStop = {
						title: '全部',
						id: ''
					}
					const aa = res.data.cate_list
					aa.unshift(fullAutoStop)
					this.adata = aa
					this.bdata = res.data
					console.log(this.bdata, 'this.bdata ')
					this.distancethis = this.getDistance(0, 0, res.data.store.lat, res.data.store.lng);
					console.log(this.distancethis, 'distancethis')
					this.backgroundImage = res.data.store.photo
				}).catch(err => {

				});
			},
			itemClick(item) {

				this.$emit('itemClick', item)

			},
			//点击左侧按钮
			tapselect(index, id) {
				this.is_hot = 0;
				this.is_new = 0;
				this.rightNav4Index = 1;
				this.rightNav3Index = -1,
					// // 左边侧边栏点击了
					this.currentTab = index;
				this.id = id
				this.getdata();
				// // 设置右边滑动
				// this.mainCur = index;
				//    this.verticalNavTop = (index - 1) * 50;

			},
			//右侧滚动
			mainScroll(e) {
				console.log("在滑动");
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {

						console.log("执行了里面在滑动");

						this.currentTab = i;
						// this.mainCur = i;
						this.verticalNavTop = (i - 1) * 50
						return true


					}
				}
			},
			//获取右侧每项的top和bottom,里面需获取对应dom元素的高度，所以只能在mounted生命周期里调用
			getHeight() {
				var top = 0;
				var bottom = 0;
				var temp = 0;
				for (let i = 0; i < this.data.length; i++) {
					let view = uni.createSelectorQuery().select("#cate-" + i)

					// #ifdef  MP-WEIXIN
					view = uni.createSelectorQuery().in(this).select("#cate-" + i);
					//	#endif


					view.fields({
						size: true
					}, data => {
						top = temp;
						bottom = temp + data.height;
						this.list[i] = {
							top: top,
							bottom: bottom
						};
						temp = bottom;
					}).exec();
				}

			}
		}
		/* ,computed: {
		    backgroundStyle() {
		      return {
		        backgroundImage: `url(${this.backgroundImage})`,
				backgroundSize: '100% 100%'
				//backgroundSize: 'cover', // 可以根据需要设置背景大小
				//backgroundPosition: 'center' // 可以设置背景位置
		      };
		    }
		} */


	}
</script>

<style scoped lang="scss">
	page{
		background-color: #fff;
	}
	.store {
		background: #fff;
		height: 120px;
		width: 95%;
		margin: 0 auto;
		position: relative;
		top: 50%;
		border-radius: 14px;
		    box-shadow: 0 0 7px 1px #ddd;
	}

	.topt {
		//background: url('../../static/mine_vip_1.png');
		//    background-size: 100% 100%;
			height: 140px;
	}

	.cate-right-item text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.cateBox {
		position: absolute;
		top: 26%;
		bottom: 0;
		background: #fff;
		width: 100%;
		display: flex;
		box-shadow: 0 0 7px 1px #ddd;
	}

	.cate-left {
		width: 25%;
		background: #f4f4f4;
		height: 100%;
	}

	.cate-left-item {
		background: #f4f4f4;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cate-left-item.activeItem {
		background: #fff;
	}

	/* 
 */

	.cate-left-item label {
		width: 4rpx;
		height: 15px;
		float: left;
		background: #f4f4f4;
	}

	.cate-left-item.activeItem label {
		// background: #0bbbef;
	}

	.cate-left-item text {
		/* width: 196rpx; */
		font-size: 28rpx;
		display: block;
		text-align: center;
	}

	/* 右侧*/
	.cate-right {
		width: 75%;
	}

	.cate-right-title {
		font-size: 28rpx;
		margin-top: 20rpx;
		line-height: 60rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		padding: 0 10px;
		width: 60%;
		padding: 0 10px;
	}

	.cate-right-title2 {
		font-size: 12px;
		color: #cbbfbf;
		position: relative;
		margin-top: 12px;
		display: flex;
	}

	.cate-right-title .line {
		position: absolute;
		height: 2rpx;
		width: 300rpx;
		background: orange;
		top: 39rpx;
		left: 50%;
		margin-left: -150rpx;
	}

	.cate-right-title text {
		background: #fff;
		position: relative;
		color: #000;
	}

	.cate-right-list {
		height: auto;
		overflow: hidden;
	}

	.cate-right-item {
		width: 33.33%;
		float: left;
		margin-top: 20rpx;
	}

	.cate-right-item image {
		width: 160rpx;
		height: 160rpx;
		display: block;
		margin: 0 auto;
		box-shadow: 0 0 7px 1px #ddd;
	}

	.cate-right-item text {
		display: block;
		text-align: center;
		font-size: 24rpx;
		width: 50%;
		margin: 2% auto;
	}

	.right_header3 {
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		overflow: auto;

		.header3_item {
			width: 120rpx;
			height: 44rpx;
			font-weight: 400;
			font-size: 20rpx;
			color: #666666;
			margin-right: 24rpx;
			white-space: nowrap;
			background: #FFFFFF;
			border: 1rpx solid #ff782a;
			border-radius: 267rpx 267rpx 267rpx 267rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-weight: 400;
				font-size: 20rpx;
				color: #666666;
				padding-right: 10rpx;
			}

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.h3_act {
			background: linear-gradient(180deg, #ff782a 0%, #fff 100%) !important;
			color: #FFFFFF !important;
		}
	}

	.r_money {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		text {
			font-weight: 600;
			font-size: 30rpx;
			color: #D30000;
		}

		image {
			width: 42rpx;
			height: 42rpx;
		}
	}
	.right-item{
			padding:  0 10px;
			.right-item-image {
				width: 100%;height: 100%;
			}
	}
</style>